<template>
	<view class="addEditForm">
		<view class="data-form bgfff">
			<view class="data-form-item flex-ac">
				<text class="data-form-label f30 require">手机号码</text>
				<view class="data-form-input">
					<input type="text" :disabled="optionDisabled" v-model="dataForm.phonenumber"
						:placeholder="optionDisabled?'-':'请输入手机号码'" placeholder-class="plStyle" />
				</view>
			</view>
			<view class="data-form-item flex-ac">
				<text class="data-form-label f30 require">用户姓名</text>
				<view class="data-form-input">
					<input type="text" :disabled="optionDisabled" v-model="dataForm.nickName"
						:placeholder="optionDisabled?'-':'请输入用户姓名'" placeholder-class="plStyle" />
				</view>
			</view>
			<view class="data-form-item flex-ac">
				<text class="data-form-label f30 require">用户账号</text>
				<view class="data-form-input">
					<input type="text" :disabled="optionDisabled" v-model="dataForm.userName"
						:placeholder="optionDisabled?'-':'请输入用户账号'" placeholder-class="plStyle" />
				</view>
			</view>
			<view class="data-form-item flex-ac">
				<text class="data-form-label f30 require">用户密码</text>
				<view class="data-form-input">
					<input type="text" :disabled="optionDisabled" v-model="dataForm.password"
						:placeholder="optionDisabled?'-':'请输入用户密码'" placeholder-class="plStyle" />
				</view>
			</view>
			<view class="data-form-item flex-ac">
				<text class="data-form-label f30 require">用户性别</text>
				<view class="data-form-input">
					<cpdd-select v-model="dataForm.sex" :disabled="optionDisabled" :list="sexList"
						keyname="name" valname="val"></cpdd-select>
				</view>
			</view>
			<view class="data-form-item flex-ac">
				<text class="data-form-label f30 require">所属部门</text>
				<view class="data-form-input">
					<cpdd-dept-select v-model="dataForm.deptId" :disabled="optionDisabled" :list="deptList"
						keyname="label" valname="id" :deptName="dataObj.deptName"></cpdd-dept-select>
				</view>
			</view>
			<view class="data-form-item flex-ac">
				<text class="data-form-label f30 require">用户状态</text>
				<view class="data-form-input">
					<radio-group name="radio" @change="radioChange">
						<label class="mr20">
							<radio value="0" :checked="dataForm.status=='0'" style="transform: scale(.7);"/><text class="radio_txt">正常</text>
						</label>
						<label>
							<radio value="1" :checked="dataForm.status=='1'" style="transform: scale(.7);"/><text class="radio_txt">停用</text>
						</label>
					</radio-group>
				</view>
			</view>
			<view class="data-form-item flex-ac">
				<text class="data-form-label f30 require">角色</text>
				<view class="data-form-input">
					<cpdd-select v-model="dataForm.roleIds" :disabled="optionDisabled" :list="roleList"
						keyname="roleName" valname="roleId"></cpdd-select>
				</view>
			</view>
			<view class="data-form-item flex-ac">
				<text class="data-form-label f30 require">备注</text>
				<view class="data-form-input">
					<input type="text" :disabled="optionDisabled" v-model="dataForm.remark"
						:placeholder="optionDisabled?'-':'请输入备注'" placeholder-class="plStyle" />
				</view>
			</view>
		</view>
		<view class="right-area-footer2 flex-ac bgfff" v-if="!optionDisabled">
			<view class="saveBtn cancleBtn" @tap="handleCancle">取消</view>
			<view class="saveBtn" @tap="handleSubmit">保存</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				did: '',
				dataObj:{},
				dataForm: { //表单
					nickName: '',
					deptId: '',
					phonenumber: '',
					userName: '',
					password: '',
					sex: '',
					status:'',
					roleIds:'',
					remark:''
				},
				sexList:[{
					name:'男',
					val:0
				},{
					name:'女',
					val:1
				},{
					name:'未知',
					val:2
				}],
				deptList:[],
				roleList:[],
				selectList: [], //上一页带过来，如果上一页用不到，可以在这里调用赋值
				optionDisabled: false,
			}
		},
		onLoad(options) {
			console.log('options', options);
			this.did = options.id || ''
			this.optionDisabled = options.op == 'look' ? true : false
			let title = options.op == 'look' ? '详情' : options.op == 'add' ? '新增' : '编辑'
			uni.setNavigationBarTitle({
				title
			})
			this.getDept()
			this.getRole()
			if(this.did){
				this.getDetail()
			}
		},
		methods: {
			getDetail(){
				this.$http.get(`/system/user/${this.did}`).then(res => {
					let result = res.data
					console.log('详情',result)
					this.dataObj = result
					Object.keys(this.dataForm).forEach(key=>this.dataForm[key]=result[key])
					// this.dataForm.password = ''
					this.dataObj.deptName = this.dataObj?.dept?.deptName
					this.dataForm.roleIds = this.dataObj?.roles.length?this.dataObj.roles[0].roleId:''
					console.log('详情',this.dataObj)
					
				})
			},
			radioChange(e){
				this.dataForm.status = e.detail.value
			},
			getDept(){
				this.$http.get('/system/user/deptTree').then(res => {
					let result = res.data
					console.log('部门',result)
					this.deptList = result
				})
			},
			getRole(){
				this.$http.get('/system/user/').then(res => {
					let result = res.roles
					console.log('角色',result)
					this.roleList = result
				})
			},
			
			handleCancle() {
				this.$u.back()
			},
			handleSubmit() {
				console.log('提交',this.dataForm);
				if(!this.dataForm.phonenumber) return this.$u.msg('请输入手机号码！')
				if(!this.dataForm.nickName) return this.$u.msg('请输入用户姓名！')
				if(!this.dataForm.userName) return this.$u.msg('请输入用户账号！')
				if(!this.dataForm.password) return this.$u.msg('请输入用户密码！')
				if(!this.dataForm.sex) return this.$u.msg('请输入用户性别！')
				if(!this.dataForm.deptId) return this.$u.msg('请选择用户角色！')
				if(!this.dataForm.status) return this.$u.msg('请选择用户状态！')
				if(!this.dataForm.roleIds) return this.$u.msg('请选择用户角色！')
				if(!this.dataForm.remark) return this.$u.msg('请输入备注！')
				this.dataForm.roleIds =this.dataForm.roleIds? [this.dataForm.roleIds]:[]
				if(this.did){
					this.dataForm.userId = this.did
					this.$http.put('/system/user',this.dataForm).then(res => {
						let result = res.data
						console.log('',result)
						uni.$emit('reFlashList')
						this.$u.msg('已编辑！')
						this.$u.back(1, 1000)
					})
				}else{
					this.$http.post('/system/user',this.dataForm).then(res => {
						let result = res.data
						console.log('',result)
						uni.$emit('reFlashList')
						this.$u.msg('已新增！')
						this.$u.back(1, 1000)
					})
				}
				
			}

		}
	}
</script>

<style lang="scss">
	.mr20 {
		margin-right: 20rpx;
	}

	.radio_txt {
		margin-left: 8rpx;
		position: relative;
		top: 5rpx;
		font-size: 28rpx;
	}
</style>